import { useLocation } from "react-router-dom";
import OrderBreadcrumb from "../../../components/order_wxq/orderBreadcrumb";
import order from "../../../api/order_wxq";
import moment from "moment";
import {
  Steps,
  Descriptions,
  Row,
  Col,
  Button,
  Image,
  Form,
  Input,
  Radio,
  Space,
  Modal,
} from "antd";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import details from "./orderDetails.scss";
import { useForm } from "antd/lib/form/Form";
import message from "../../../utils/message";
const { TextArea } = Input;
const { Step } = Steps;
function OrderDetails() {
  const navigate = useNavigate();
  const { state } = useLocation();
  console.log(state);

  const [orderData, setOrderData] = useState({});
  useEffect(() => {
    getDetails(state.content)
  }, [])
  //请求订单详情
  const getDetails = (id) => {
    console.log(id);
    order.getOrderDetails(id).then(res => {
      console.log(res);
      if (res.code == 200) {
        setOrderData(res.data)
      }
    })
  }
  //发票表单
  const [invoice] = Form.useForm();
  //用户表单
  const [userForm] = Form.useForm();
  //订单备注表单
  const [orderRemark] = Form.useForm();
  const subInvoice = () => {
    console.log(invoice.getFieldsValue());
  };
  //返回
  const clickBack = () => {
    navigate(-1);
  };
  //跳转用户资料
  const skipUser = () => {
    navigate();
  };
  //用户信息编辑弹窗
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    message.success("修改成功");
    console.log(userForm.getFieldsValue());

    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //订单备注编辑弹窗
  const [isRemarkVisible, setIsRemarkVisible] = useState(false);
  const showRemark = () => {
    setIsRemarkVisible(true);
    orderRemark.setFieldsValue({ remark: orderData.orderNote })
  };

  const RemarkOk = () => {
    console.log(orderRemark.getFieldsValue());
    message.success("添加备注成功");
    setIsRemarkVisible(false);
  };

  const RemarkCancel = () => {
    setIsRemarkVisible(false);
  };
  return (
    <div id="order-details" style={details}>
      <OrderBreadcrumb tit={"订单管理"} pathName={"订单详情"} />
      <div className="steps">
        <h2>已完成</h2>
        <Steps current={1}>
          <Step title="卖家下单" description="2022-04-12 10:10" />
          <Step title="卖家发货" description="2022-04-13 10:10" />
          <Step title="买家收货" description="" />
          <Step title="买家评价" description="" />
        </Steps>
      </div>
      <div className="orderdata">
        <Row gutter={10} className="roworder">
          <Col span={8} className="user">
            <Button type="link" className="btn-abs" onClick={showModal}>
              编辑
            </Button>
            <Descriptions title="收货人信息" layout="horizontal" column={1}>
              <Descriptions.Item label="收货人姓名">{orderData.userName}</Descriptions.Item>
              <Descriptions.Item label="联系人电话">
                {orderData.phone}
              </Descriptions.Item>
              <Descriptions.Item label="收获地址">
                浙江省杭州市西湖区工专路
              </Descriptions.Item>
              <Descriptions.Item label="买家留言">{orderData.buyerMessage}</Descriptions.Item>
            </Descriptions>
          </Col>
          <Col span={8} className="order">
            <Descriptions title="订单信息" layout="horizontal" column={1}>
              <Descriptions.Item label="订单编号">
                {orderData.orderId}<Button type="link">复制</Button>
              </Descriptions.Item>
              <Descriptions.Item label="下单时间">
                {moment.utc(orderData.orderTime).format('YYYY-MM-DD')}
              </Descriptions.Item>
              <Descriptions.Item label="支付时间">
                {moment.utc(orderData.payTime).format('YYYY-MM-DD')}
              </Descriptions.Item>
              <Descriptions.Item label="支付方式">微信支付</Descriptions.Item>
              <Descriptions.Item label="订单类型">图文课程</Descriptions.Item>
              <Descriptions.Item label="订单来源">APP</Descriptions.Item>
              <Descriptions.Item label="订单备注">
                {orderData.orderNote}
                <Button type="link" onClick={showRemark}>
                  编辑备注
                </Button>
              </Descriptions.Item>
            </Descriptions>
          </Col>
          <Col span={8} className="mine">
            <Button type="link" className="btn-abs" onClick={skipUser}>
              查看资料
            </Button>
            <Descriptions title="买家信息" layout="horizontal" column={1}>
              <Descriptions.Item label="微信昵称">小丸子</Descriptions.Item>
              <Descriptions.Item label="用户姓名">曲丽丽</Descriptions.Item>
              <Descriptions.Item label="用户性别">{orderData.sex == '1' ? '女' : '男'}</Descriptions.Item>
              <Descriptions.Item label="用户年龄">23</Descriptions.Item>
              <Descriptions.Item label="手机号码">
                18890900900
              </Descriptions.Item>
              <Descriptions.Item label="用户ID">18890900900</Descriptions.Item>
              <Descriptions.Item label="注册时间">
                {moment.utc(orderData.recentLogin).format('YYYY-MM-DD')}
              </Descriptions.Item>
              <Descriptions.Item label="最近登录时间">
                {moment.utc(orderData.registrationTime).format('YYYY-MM-DD')}
              </Descriptions.Item>
            </Descriptions>
          </Col>
        </Row>
      </div>
      <div className="shoopdata">
        <Descriptions title="商品信息" layout="vertical" bordered column={9}>
          <Descriptions.Item label="课程信息" span={2}>
            <Image
              width={48}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            />
            <span style={{ marginLeft: "14px", color: "#0066ff" }}>
              西班牙语0-B2高级直达
            </span>
          </Descriptions.Item>
          <Descriptions.Item label="单价（元）" span={2}>
            300.00
          </Descriptions.Item>
          <Descriptions.Item label="数量">1</Descriptions.Item>
          <Descriptions.Item label="优惠">
            新人立减<p style={{ color: "red" }}>-30</p>
          </Descriptions.Item>
          <Descriptions.Item label="发货状态">已完成</Descriptions.Item>
          <Descriptions.Item label="合计（元）" span={2}>
            270.00
          </Descriptions.Item>
        </Descriptions>
        <Row>
          <Col span={18}>
            <span>本单积分：270</span>
          </Col>
          <Col span={6}>
            <span>商品总价：¥300.00</span>
            <span>运费：¥0.00</span>
            <span>优惠：¥30.00</span>
          </Col>
        </Row>
        <Row className="cost">
          <Col span={6}>
            <h2>本单实收：¥270.00</h2>
          </Col>
        </Row>
      </div>
      <div className="invoice">
        <h3>发票信息</h3>

        <Form
          form={invoice}
          name="control-hooks"
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          layout="horizontal"
          initialValues={{
            invoicetitle: "企业",
            type: "电子发票",
          }}
          colon={false}
        >
          <Row>
            <Col span={12}>
              <Form.Item label="发票状态">未开票</Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name="type" label="发票类型">
                <Radio.Group>
                  <Radio value="电子发票"> 电子发票 </Radio>
                  <Radio value="纸质发票"> 纸质发票 </Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                name="comname"
                label="企业名称"
                rules={[{ required: true }]}
              >
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item name="bank" label="开户银行">
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item name="phone" label="企业电话">
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item name="mobile" label="手机号码">
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="invoicetitle" label="发票抬头">
                <Radio.Group>
                  <Radio value="企业"> 企业 </Radio>
                  <Radio value="个人"> 个人 </Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                name="identifynum"
                label="识别号"
                rules={[{ required: true }]}
              >
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item name="bankId" label="银行卡号">
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item name="status" label="企业地址">
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item name="email" label="邮箱地址">
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Space size={20}>
          <Button type="primary" size="large" onClick={subInvoice}>
            提交发票信息
          </Button>
          <Button size="large" onClick={clickBack}>
            返回
          </Button>
        </Space>
      </div>
      {/* 用户信息编辑 */}
      <Modal
        title="修改收货人信息"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        centered={true}
      >
        <Form
          form={userForm}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          name="nest-messages"
          labelWrap={false}
          labelAlign="right"
        >
          <Form.Item
            name="username"
            label="收货人姓名"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="phone" label="联系电话" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="site" label="收货地址" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="remark" label="备注">
            <TextArea rows={4} maxLength={50} />
          </Form.Item>
        </Form>
      </Modal>
      {/* 订单备注编辑 */}
      <Modal
        title="编辑订单备注"
        visible={isRemarkVisible}
        onOk={RemarkOk}
        onCancel={RemarkCancel}
        centered={true}
      >
        <Form
          form={orderRemark}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          name="nest-messages"
          labelWrap={false}
          labelAlign="right"
        >
          <Form.Item name="remark" label="订单备注">
            <TextArea rows={4} maxLength={50} placeholder="请输入" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
export default OrderDetails;
